<template>

  <el-card v-if="previewImageList && previewImageList.length > 0">
    <div class="flex-y flex-center gap-2">
      <el-image :src="previewImageList[(currentPage - 1)]" lazy height="540px"></el-image>
      <div class="flex-x flex-center">
        <el-pagination v-if="previewImageList.length > 1" :current-page="currentPage" :page-size="1"
          :total="previewImageList.length" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

  </el-card>

</template>

<script>
export default {
  name: 'PPTPreview',
  props: {
    previewImageList: {
      type: Array,
      required: true
    }
  },
  watch: {
    previewImageList: {
      handler() {
        this.currentPage = 1
      }
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page
    }
  }
}
</script>
